<template>
    <el-upload
            class="pop-upload"
            ref="upload"
            action=""
            :file-list="fileList"
            :auto-upload="false"
            :multiple="true"
            :on-change="handleChange"
            :on-remove="handleRemove"
    >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-upload>
</template>

<script>
   
    export default {
        data() {
            return {
                fileList: [],   // 定义一个空数组
            };
        },
        methods: {
            // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
            handleChange(file, fileList) {
                this.fileList = fileList
            },
            // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。function(file, fileList)
            handleRemove(file, fileList) {
                this.fileList = fileList
            },
            //上传服务器
            submitUpload() {
                //判断是否有文件再上传
                if (this.fileList.length === 0) {
                    return this.$message.warning('请选取文件后再上传')
                }
                // 下面的代码将创建一个空的FormData对象:
                const formData = new FormData()
                // 你可以使用FormData.append来添加键/值对到表单里面；
                this.fileList.forEach((file) => {
                    formData.append('file', file.raw)
                })
                // 添加自定义参数，不传可删除
                formData.append('parentId', '49')
                formData.append('uploadType', '备料单')
                formData.append('versions', 'v4.0')
                console.log(formData);
                
                //自定义的接口也可以用ajax或者自己封装的接口
                this.$axios.post("http://localhost:1011/suggestion/test",formData).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success('上传成功');
                    } else {
                        this.$message.error('上传失败');
                    }
                    //清空fileList
                    this.fileList = []
                })
            },
        },
    };
</script>

<style>
</style>
